<template>
  <div class="index">
    <head-text titleText="餐饮购买限制"></head-text>
    <div class="list-content ">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="餐饮购买限制" name="first">
          <el-form
            :model="form"
            status-icon
            ref="form"
            :rules="rules"
            label-width="130px"
            class="demo-ruleForm"
          >
            <el-form-item label="下单时间限制：" prop="bookingAdvance">
              <span> 活动开始前</span>
              <el-input-number
                v-model="form.bookingAdvance"
                autocomplete="off"
                style="width:120px;"
                size="mini"
              ></el-input-number>
              <span> 小时不可下单</span>
            </el-form-item>
            <el-form-item label="取消订单限制：" prop="cancelAdvance">
              <span> 活动开始前</span>
              <el-input-number
                v-model="form.cancelAdvance"
                autocomplete="off"
                style="width:120px;"
                size="mini"
              ></el-input-number>
              <span> 小时不可取消订单</span>
            </el-form-item>
            <el-form-item label="基础打包费：" prop="packingCharge">
              <span> 设定</span>
              <el-input-number
                v-model="form.packingCharge"
                autocomplete="off"
                style="width:120px;"
                size="mini"
              ></el-input-number>
              <span> 元</span>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="Sub()" size="mini"
                >保存</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { _debounce } from "@u/debounce";
import headText from "@c/headText";
import { placeholderTips, validateNum, validateNumber } from "./validate";
import {
  getOrderConfigApi,
  updateOrderConfigApi,
  addOrderConfigApi
} from "@s/api";
export default {
  name: "index",
  data() {
    return {
      activeName: "first",
      placeholderTips: placeholderTips,
      form: {
        id: "",
        bookingAdvance: "",
        cancelAdvance: "",
        packingCharge: ""
      },
      rules: {
        bookingAdvance: [
          { required: true, message: "请输入数值", trigger: "blur" },
          { validator: validateNum }
        ],
        cancelAdvance: [
          { required: true, message: "请输入数值", trigger: "blur" },
          { validator: validateNum }
        ],
        packingCharge: [
          { required: true, message: "请输入数值", trigger: "blur" },
          { validator: validateNumber }
        ]
      }
    };
  },
  components: {
    headText
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      let json = {
        limit: 10,
        page: 1,
        orderType: 1 // 1 餐饮
      };
      getOrderConfigApi(json).then(res => {
        let obj = {};
        res.list.forEach(item => {
          if (item.orderType == 1) {
            obj = item;
          }
        });
        this.form = obj;
      });
    },
    Sub: _debounce(function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$confirm("此操作将修改该信息?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            if (this.form.id) {
              let json = {
                orderType: 1, //餐饮
                id: this.form.id,
                bookingAdvance: this.form.bookingAdvance,
                cancelAdvance: this.form.cancelAdvance,
                packingCharge: this.form.packingCharge
              };
              this.updateSub(json);
            } else {
              let json = {
                orderType: 1, //餐饮
                bookingAdvance: this.form.bookingAdvance,
                cancelAdvance: this.form.cancelAdvance,
                packingCharge: this.form.packingCharge
              };
              this.addSub(json);
            }
          });
        }
      });
    }),
    updateSub(json) {
      updateOrderConfigApi(json).then(() => {
        this.$message({
          type: "success",
          message: "修改成功！"
        });
      });
    },
    addSub(json) {
      addOrderConfigApi(json).then(() => {
        this.$message({
          type: "success",
          message: "修改成功！"
        });
      });
    }
  }
};
</script>
<style scoped lang="scss">
.demo-ruleForm {
  span {
    margin: 0 10px;
  }
}
</style>
